<template>
  <div>
    <el-button type="primary" @click="visible = true">Add Book</el-button>
    <el-dialog :visible.sync="visible" title="Add Book" @close="resetForm">
      <el-form ref="form" :model="form" label-width="100px" class="add-book-form">
        <el-form-item label="Author">
          <el-input v-model="form.author" placeholder="Enter author"></el-input>
        </el-form-item>
        <el-form-item label="Bookname">
          <el-input v-model="form.bookname" placeholder="Enter bookname"></el-input>
        </el-form-item>
        <el-form-item label="Category">
          <el-input v-model="form.category" placeholder="Enter category"></el-input>
        </el-form-item>
        <el-form-item label="Introduction">
          <el-input
            v-model="form.introduction"
            placeholder="Enter introduction"
            :rows="3"
            type="textarea"
          ></el-input>
        </el-form-item>
        <el-form-item label="ISBN">
          <el-input v-model="form.isbn" placeholder="Enter ISBN"></el-input>
        </el-form-item>
        <el-form-item label="Location">
          <el-input v-model="form.location" placeholder="Enter location"></el-input>
        </el-form-item>
        <el-form-item label="Press">
          <el-input v-model="form.press" placeholder="Enter press"></el-input>
        </el-form-item>
        <el-form-item label="Publishtime">
          <el-input v-model="form.publishtime" placeholder="Enter publishtime"></el-input>
        </el-form-item>
        <el-form-item label="Remain">
          <el-input v-model="form.remain" placeholder="Enter remain"></el-input>
        </el-form-item>
        <el-form-item label="Total">
          <el-input v-model="form.total" placeholder="Enter total"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">Cancel</el-button>
        <el-button type="primary" @click="submitForm">Add</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: {
        author: '',
        bookname: '',
        category: '',
        introduction: '',
        isbn: '',
        location: '',
        press: '',
        publishtime: '',
        remain: 0,
        total: 0
      }
    }
  },
  methods: {
  submitForm() {
    this.$refs.form.validate(valid => {
      if (valid) {
        // 如果表单验证通过，发送请求到后端进行保存
        this.$request.post('/book/add', this.form, {
          params: {
            keyword: 's'
          }
        })
          .then(res => {
            console.log(res.data);
            this.resetForm();
            this.addBookDialogVisible = false;
            this.$message({
              message: 'Successfully added',
              type: 'success'
            });
            this.$emit('book-added');
          })
          .catch(error => {
            console.log(error);
            this.$message.error('Failed');
          });
      } else {
        console.log('Form validation failed');
        return false;
      }
    });
  },
  resetForm() {
    this.$refs.form.resetFields();
  }
}


}
</script>

<style scoped>
.add-book-form {
  width: 100%;
  padding: 20px;
}

.add-book-form .el-form-item {
  margin-bottom: 20px;
}

.add-book-form .el-form-item__label {
  font-weight: bold;
  margin-right: 10px;
}

.add-book-form .el-input {
  width: calc(100% - 100px);
}

.add-book-form .dialog-footer {
  text-align: right;
  padding: 20px;
}
</style>
